<template>
  <div>
    <input type="text" id="ipt" ref="ipt" />
    <button @click="handleFocus" ref="btn">点击输入框聚焦</button>

    <hm-alert ref="alert" />
    <button @click="handleShow">点击弹框</button>
  </div>
</template>

<script>
//每个组件实例对象都有一个$refs属性
//对象里面存储的东西就是模板里面添加了ref的dom元素

//父组件如何调用子组件的方法
//ref添加到组件上的时候，拿到的是组件的实例，可以获取到组件内部的所有属性
import HmAlert from '@/components/hm-alert.vue'
export default {
  components: { HmAlert },
  methods: {
    handleFocus() {
      //输入框聚焦的逻辑
      //获取到dom元素之后，调用focus方法可以实现聚焦
      //通过$refs获取dom元素
      this.$refs.ipt.focus()
    },
    handleShow() {
      console.log();
      this.$refs.alert.handleAlert('我来了')
    },
  },
}
</script>

<style></style>
